
<!--
 * @Author: jiu yin
 * @Date: 2023-03-30 15:31:35
 * @LastEditTime: 2023-04-25 15:27:00
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \init-admin\src\views\test\index.vue
 * jiu
-->
<template>
    <div>
        <Form :formDatas="hourConfig" :formList="formListOut" labelWidth="162px" onSubmits="保存"
            @onSubmit="onSubmitsTutorConfig"></Form>

        <Table :showSortIndex="{ show: true, lable: '序号' }" ref="TableList" :column="column" :loadData="loadData" :expand="true" headHight="200px"
            :selection="true"  @checkbox="checkboxArr">
            <template #expand="{ row }">
                <div>尼玛比</div>
                <div>{{ row }}</div>
            </template>
            <template #effectiveTime="{ scope }">
                <div>
                    我说{{ scope.time }}
                </div>
            </template>

        </Table>
        <Form :formDatas="hourConfig" :formList="formListOut" labelWidth="162px" onSubmits="保存"
            @onSubmit="onSubmitsTutorConfig"></Form>

    </div>
</template>
    
<script setup name="home1Index">
import { reactive, toRefs, ref, computed, onMounted } from "vue";
import { useCounterStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import Form from '@/components/Form';
import Table from "@/components/Table";
import { switchIsShow, isShow } from "@/utils"
const userStore = useCounterStore()
let hourConfig = reactive({})
const onSubmitsTutorConfig = (e) => {
    console.log(e, "表单数据");
} 

onMounted(()=>{
    console.log("第二次");
})
let formListOut = reactive([
    {
        label: "会员卡剩余价值", code: "surplusValue", required: true, labelWidth: "162px", 
        change(val, item, formData, formList) {
            console.log(val);
        }
    },
    { label: "费率", code: "rate", placeholder: "名字或手机号或卡号", },
    { label: "手续费", code: "commission", suffix: "元" },
    { label: "实际退款金额", code: "payMoney", suffix: "元" },
    {
        el: "date", label: "退卡日期", code: "date",
        width: "162px", format: "YYYY-MM-DD HH:mm:ss"
    },
    {
        el: "textarea", label: "备注", code: "remark",
        width: "260px"
    },
    {
        el: "radio",
        label: "卡属性",
        code: "cardType",
        //   disabled: true,
        slotName: "relationList",
        radios: [
            { name: "主卡", id: 1 },
            { name: "副卡", id: 2 },
        ],
    },
    {
        el: "select",
        label: "状态",
        code: "status",
        // labelWidth: "72px",
        options: [
            { id: 0, name: "待确认" },
            { id: 10, name: "待付款" },
            { id: 20, name: "已完成" },
            { id: -10, name: "未通过" },
            { id: -20, name: "已取消" },
            { id: -30, name: "已作废" },
        ],
    },
    {
        el: "select",
        label: "销售",
        code: "salesmanId",
        //   optionsFn: salesList,
        //   params: { status: 1 },
        filterable: true,

    },
    {
        el: "switch",
        label: "销售",
        code: "salesmanIdw",
    },

    {
        el: "checkbox",
        label: "销售",
        code: "salesmanIdb",
        checkboxArr: [],
        checkboxs: [
            { name: "主卡", id: "尼玛" },
            { name: "副卡", id: 2 },],
        slotName: "relationList",
    },
])
const { doubleCount } = storeToRefs(userStore)//结构使用
const { increment } = userStore



let column = reactive([
    { prop: "memberName", label: "会员名称", width: 180 },
    { prop: "contact", label: "会员手机号", },
    { prop: "memberCouponCode", label: "优惠券ID", width: 80 },
    { prop: "couponName", label: "优惠券名称", width: 120 },
    { prop: "amount", label: "优惠面额" },
    {
        prop: "courseType",
        label: "获取渠道",
        html: (val) => "你麻"
    },
    {
        prop: "effectiveTime",
        label: "生效时间",
        render: true
    },
    {
        prop: "expirationTime",
        label: "到期时间",
        switch: true,
        value: [true, false]
    },
    {
        prop: "status", label: "状态",
        html: (val) => isShow(val.status == -1, ["已退回", "已使用"]),
    },
    {
        prop: "type", label: "消费类型",

    },

    {
        prop: "img",
        label: "图片",
        img: true,
    },
    {
        prop: "time",
        label: "操作",
        // fixed:"left",
        actives: [
            {
                name: "删除",
                method: (row) => {
                    console.log(row);
                }
            }
        ]
    }
])


let loadData = reactive([
    { memberName: "什么情况", contact: "123456789", memberCouponCode: "123456789", couponName: "什么情况", amount: "123456789", courseType: "什么情况", effectiveTime: "123456789", expirationTime: false, status: "123456789", type: "什么情况", time: "123456789" ,img:"https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",id:1},
    { memberName: "什么情况", contact: "123456789", memberCouponCode: "123456789", couponName: "什么情况", amount: "123456789", courseType: "什么情况", effectiveTime: "123456789", expirationTime: false, status: "123456789", type: "什么情况", time: "123456789",img:"https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" ,id:2},
])
const checkboxArr = (arr) => {
    console.log(arr);
}
</script>
    
    
<style scoped></style>
    